<template>
  <!-- 表格 -->
  <el-table
    :data="templateData"
    style="width: 100%;"
    stripe
    ref="templateTable"
    :empty-text="$t('basic.noData')"
    @filter-change="filterTable"
    @sort-change="sortData"
  >
    <template v-for="(item, index) in tableHeaders">
      <el-table-column
        v-if="item.prop == 'per'"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        sortable
      >
        <template slot-scope="scope">
          <el-progress
            class="NewCMMonitorPro"
            :text-inside="true"
            :percentage="70"
            :width="scope.row.width"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="item.prop == 'Actions'"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        sortable
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            style="color: #1E90FF;font-size: 14px;"
          >
            <i
              class="el-icon-notebook-2"
              style="font-size: 15px;"
              title="More"
            ></i>
            <!--More-->
          </el-button>
          <el-button
            size="mini"
            type="text"
            plain
            @click="handleDelete(scope.row)"
            style="color: #1E90FF;font-size: 14px;"
          >
            <i
              class="el-icon-delete"
              style="font-size: 15px;"
              title="Delete"
            ></i>
            <!--Delete-->
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :column-key="item.prop"
        :min-width="item.minWidth"
        :width="item.width"
        show-overflow-tooltip
        sortable
      >
      </el-table-column>
    </template>
    <!-- 过滤 -->
    <el-table-column
      width="40"
      align="center"
      :filters="filters"
      filter-placement="bottom"
      column-key="filter"
    >
      <template slot="header">
        <el-popover
          placement="left"
          trigger="hover"
          content="FILTER"
          :visible-arrow="false"
        >
          <i
            slot="reference"
            class="el-icon-setting"
            style="cursor: pointer;"
          ></i>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      templateData: [
        {
          Des: 'test',
          CreateTime: '2020-05-20',
          FinishedTime: '2020-07-20',
          CreateUser: 'andy',
          per: '80%'
        }
      ], // 表格遍历
      tableHeaders: [
        { label: 'Description', prop: 'Des', width: 'auto', minWidth: 150 },
        { label: 'Create Time', prop: 'CreateTime', width: 'auto' },
        { label: 'End Time', prop: 'FinishedTime', width: 'auto' },
        { label: 'Creator', prop: 'CreateUser', width: 'auto' },
        { label: 'Progress', prop: 'per', width: 'auto' },
        { label: 'Actions', prop: 'Actions', width: '80' }
      ],
      filters: [
        // 过滤表格
        { text: 'Description', value: 'Des' },
        { text: 'Create Time', value: 'CreateTime' },
        { text: 'End Time', value: 'FinishedTime' },
        { text: 'Creator', value: 'CreateUser' },
        { text: 'Progress', value: 'per' },
        { text: 'Actions', value: 'Actions' }
      ]
    }
  }
}
</script>
